<template>
  <div id="app">
    <div id="nav" v-if="$route.meta.requiresAuth">
      <router-link to="/"><span>推荐音乐</span></router-link>
      <router-link to="/rank"><span>排行榜</span></router-link>
      <router-link to="/search"><span>搜索</span></router-link>
    </div>
    <div
      class="box"
      :class="{ home: $route.meta.requiresAuth, bottom: showbar }"
    >
      <keep-alive>
        <router-view
          @play-song="playSong"
          :selectedSong="selectedSong"
          :playingStatus="playingStatus"
          :lastrouter="lastrouter"
          @change-lastrouter="changeLastrouter"
        />
      </keep-alive>
    </div>
    <Play
      :playingSong="playingSong"
      :playingStatus="playingStatus"
      @to-play="toPlay"
      @to-pause="toPause"
      :showbar="showbar"
      :playSongList="playSongList"
      :selectedSong="selectedSong"
      @play-song="playingSong"
      @toplay-song="playingSong = $event"
      @update:next-song="nextSong"
      @update:last-song="lastSong"
      @to-del="toDel"
      ref="play"
    ></Play>
  </div>
</template>

<script>
import Play from "@/components/Play.vue";

export default {
  data: function () {
    return {
      playingSong: {},
      playSongList: {},
      showbar: false,
      playingStatus: true,
      lastrouter: "",
    };
  },
  components: {
    Play,
  },
  methods: {
    changeLastrouter(str) {
      this.lastrouter = str;
    },
    toPlay(str) {
      this.playingStatus = str;
    },
    toPause(str) {
      this.playingStatus = str;
    },
    playSong(a, b) {
      this.playingSong = a;
      this.playSongList = b;
    },
    nextSong(str) {
      let n = this.playSongList.findIndex((ele) => {
        return ele.id == this.playingSong.id;
      });

      switch (str) {
        case "circulation": {
          if (n == this.playSongList.length - 1) {
            this.playingSong = this.playSongList[0];
          } else {
            this.playingSong = this.playSongList[n + 1];
          }
          break;
        }

        case "random": {
          let arr1 = JSON.parse(JSON.stringify(this.playSongList));
          arr1.splice(n - 1, 1);
          this.playingSong = arr1.sort(() => Math.random() - 0.5)[0];
          break;
        }

        case "sequence": {
          if (n == this.playSongList.length - 1) {
            this.$refs.play.$refs.audio.pause();
          } else {
            this.playingSong = this.playSongList[n + 1];
          }
          break;
        }
      }
    },

    lastSong() {
      let n = this.playSongList.findIndex((ele) => {
        return ele.id == this.playingSong.id;
      });
      if (n == 0) {
        this.playingSong = this.playSongList[this.playSongList.length - 1];
      } else {
        this.playingSong = this.playSongList[n - 1];
      }
    },
    toDel(id) {
      if (id == this.playingSong.id) {
        // this.$refs.play.$refs.audio.pause();
        // this.showbar = false;
        // this.playingStatus = true;
        // this.playingSong.id = "null";
        let n = this.playSongList.findIndex((ele) => {
          return ele.id == id;
        });
        this.playingSong = this.playSongList[n + 1];
      }
      this.playSongList = this.playSongList.filter((ele) => {
        return ele.id == id ? false : ele;
      });
    },
  },
  computed: {
    selectedSong() {
      return this.playingSong.id;
    },
  },
  watch: {
    playingSong: function (n) {
      if (n) {
        this.showbar = true;
      }
    },
    playSongList: function (n) {
      if (!n) {
        this.showbar = false;
      }
    },
  },
};
</script>

<style lang="less">
@import "./assets/item.less";
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #333333;
  position: relative;
}
#nav {
  width: 100%;
  display: flex;
  height: 40px;
  // border-bottom: 1px solid #ccc;
  box-shadow: 0 1px 2px #ccc;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 10;
  a {
    flex: 1;
    color: #333333;
    line-height: 40px;
    text-align: center;
    text-decoration: none;
    span {
      display: inline-block;
      height: 100%;
      padding: 0 5px;
    }
    &.router-link-exact-active > span {
      color: @red;
      border-bottom: 3px solid @red;
    }
  }
}
.box {
  &.home {
    margin-top: 40px;
  }
  &.bottom {
    margin-bottom: 51px;
  }
}
</style>
